<template>
    <div>
        <van-pull-refresh class="pullRefresh" v-model="refreshLoading" @refresh="onRefresh">
            <van-list v-model="loading" :finished="finished" :finished-text="listData.length ? '没有更多了' : ''" @load="onLoad">
                <van-swipe-cell v-for="(val, ind) in listData" :key="ind">
                    <div class="cellContent" @click="$refs.visitorDetailRef.handleDetail(val)">
                        <div class="con">
                            <p class="tit">
                                <b>
                                    {{ val.visitor || '-' }}
                                    <span v-if="val.visitorSexName">（{{val.visitorSexName}}）</span>
                                </b>
                                <a v-if="val.visitType === '01'" class="type">登记</a>
                                <a v-if="val.visitType === '02'" class="type">预约</a>
                                <a v-if="val.appStatusName" class="status" :class="'status' + val.appStatus">{{val.appStatus === '1' ? val.appStatusName : val.appStatusName.slice(2)}}</a>
                                <span v-if="val.createTime" class="time">{{ val.createTime.slice(5, -3) }}</span>
                            </p>
                            <p class="reason">
                                {{ val.visitReasonName }}来访
                            </p>
                        </div>
                        <div class="con">
                            <p>
                                <span class="label">联系电话：</span>
                                <span>{{ $infoHiding.handlePhone(val.visitorPhone) }}</span>
                            </p>
                            <p>
                                <span class="label">来访单位：</span>
                                <span>
                                    {{val.visitorCorpName}}
                                    <span v-if="val.visitorsEntourageSaveList && val.visitorsEntourageSaveList.length">（{{val.visitorsEntourageSaveList.length + 1}}人）</span>
                                </span>
                            </p>
                            <p>
                                <span class="label">来访时间：</span>
                                <span>{{val.visitTime}}</span>
                            </p>
                            <p>
                                <span class="label">离开时间：</span>
                                <span>{{val.departureTime}}</span>
                            </p>
                        </div>
                    </div>
                </van-swipe-cell>
            </van-list>
            <van-empty v-if="!loading && !listData.length" class="custom-image" :image="require('../../../../assets/images/empty.png')" description="暂无数据" />
        </van-pull-refresh>
        <!-- 详情 -->
        <visitorDetail ref="visitorDetailRef" :readonly="true" />
    </div>

</template>

<script>
    import { pageForMyVisitor } from '@/api/srvAssurance/convaccess/visitorApproval';
    import visitorDetail from '../visitorApproval/visitorDetail.vue';

    export default {
        components: { visitorDetail },
        data () {
            return {
                loading: false,
                finished: false,
                refreshLoading: false,
                pageNum: 1,
                formData: {
                    keyword: '',
                    visitReason: '',
                    visitTimeBgn: '',
                    visitTimeEnd: ''
                },
                listData: []
            };
        },
        created () {
            this.getListData();
        },
        methods: {
            // 获取列表数据
            getListData () {
                this.loading = true;
                let params = {
                    ...this.formData,
                    pageNum: this.pageNum,
                    pageSize: 20
                }
                pageForMyVisitor(params).then((res) => {
                    this.loading = false;
                    if (res.code === 1000 && res.data) {
                        this.listData = [...this.listData, ...res.data.records];
                        if (this.listData.length >= res.data.total) {
                            this.finished = true;
                        }
                    } else {
                        this.finished = true;
                    }
                }).catch(() => {
                    this.loading = false;
                    this.finished = true;
                });
            },
            onRefresh () {
                this.refreshLoading = false;
                this.finished = false;
                this.listData = [];
                this.pageNum = 1;
                this.getListData();
            },
            onLoad () {
                this.pageNum++;
                this.getListData();
            },
            getSearch (data) {
                this.formData = { ...data };
                this.onRefresh();
            }
        },
    };
</script>

<style scoped lang="less">
    .cellContent {
        padding: 0;
        .van-swipe-cell {
            margin-bottom: 10px;
        }
        .con {
            padding: 5px 10px;
            box-sizing: border-box;
            border-bottom: 1px solid #eee;
            .tit {
                font-size: 15px;
                position: relative;
                height: 30px;
                b span {
                    font-size: 14px;
                }
                .time {
                    position: absolute;
                    right: 0;
                    top: 11px;
                    color: #aaa;
                    font-size: 13px;
                }
                .status {
                    background: rgb(70, 172, 240);
                    font-size: 9px;
                    color: #fff;
                    margin-left: 8px;
                    padding: 2px 5px;
                    border-radius: 3px;
                }
                .status2 {
                    background: #1aa78f;
                }
                .status3 {
                    background: #f25454;
                }
                .type {
                    background: #f2a84e;
                    font-size: 9px;
                    color: #fff;
                    margin-left: 8px;
                    padding: 2px 3px;
                    border-radius: 3px;
                }
            }
            .reason {
                font-size: 13px;
                color: #aaa;
                line-height: 20px;
            }
        }
    }
</style>